<script setup>
import Layout_top from '@/components/Layout_top.vue'
import Layout_foot from '@/components/Layout_foot.vue'
import { ref } from 'vue'
import { ShoppingCart } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

// 模拟商品详情数据
const route = useRoute()
const goodsDetail = ref({
    gid: 3,
    gprice: 4,
    gname: "橙子",
    gdetails: "金黄的大橙子",
    gpic: "http://127.0.0.1:88/img/goods/goods001.jpg"
})
import { onMounted } from 'vue'
import { goodsDetailService } from '@/api/goods.js'
onMounted(async () => {
    let res = await goodsDetailService(route.params.id);
    goodsDetail.value = res.data;
})
// 数量选择
const quantity = ref(1)
import { addCartService } from '@/api/cart.js'// 加入购物车功能
import { ElMessage, ElMessageBox } from 'element-plus'
// 加入购物车
const addToCart = async () => {
    let res = await addCartService(route.params.id, quantity.value);
    if (res.code === 200) {
        ElMessage.success('加入购物车成功')
    } else {
        ElMessageBox.alert('加入购物车失败')
    }
}
</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <Layout_top></Layout_top>
            </el-header>
            <el-main>
                
                <div class="goods-detail-container">
                    <!-- 上半部分：商品主图和信息 -->
                    <div class="top-section">
                        <el-row :gutter="20" class="el-row">
                            <el-col :span="12">
                                <div class="detail-image-container">
                                    <img :src="goodsDetail.gpic" class="detail-image" alt="商品主图" />
                                </div>
                            </el-col>

                            <el-col :span="12">
                                <div class="goods-info">
                                    <h1 class="goods-title">{{ goodsDetail.gname }}</h1>
                                    <div class="price-section">
                                        <span class="current-price">¥{{ goodsDetail.gprice }}</span>
                                    </div>

                                    <!-- 购买操作区域 -->
                                    <div class="action-section">
                                        <div class="quantity-section">
                                            <h3>购买数量</h3>
                                            <el-input-number v-model="quantity" :min="1" :max="10"
                                                controls-position="right" />
                                        </div>
                                        <el-button type="primary" class="add-cart-btn" @click="addToCart" size="large">
                                            <el-icon>
                                                <ShoppingCart />
                                            </el-icon>
                                            加入购物车
                                        </el-button>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                    <!-- 下半部分：商品详情 -->
                    <div class="bottom-section">
                        <div class="goods-description">
                            <h2>商品详情</h2>
                            <p>{{ goodsDetail.gdetails }}</p>
                        </div>
                    </div>
                </div>
            </el-main>
            <el-footer>
                <Layout_foot></Layout_foot>
            </el-footer>
        </el-container>
    </div>
</template>

<style lang="scss" scoped>
.common-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

// .el-container {
//     flex: 1;
//     display: flex;
//     flex-direction: column;
// }

// .el-main {
//     flex: 1;
//     padding: 0;
// }


// .el-col {
//     display: flex;
//     > div {
//         width: 100%;
//     }
// }

.detail-image-container {
    flex: 1;
    position: relative;


    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        object-position: top center;
        border-radius: 8px;
    }
}

// .detail-image {
//     border-radius: 8px;
//     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
//     width: 100%;
//     height: 100%;
//     object-fit: contain;
//     object-position: top center;
// }

.goods-detail-container {
    max-width: 1200px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    // gap: 20px;
    height: calc(100vh - 200px); // 添加可视区域高度计算
}

.goods-info {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between; // 新增：内容分布优化
}

.top-section {
    width: 100%;
    height: auto; // 改为自动高度
    margin: 0 auto;

    .el-row {
        height: 100%;
        // display: flex;
        // align-items: stretch; // 新增：强制列等高
    }
}


// 

.action-section {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.quantity-section {
    display: flex;

    flex-direction: column;
    ;
    gap: 15px;


}



.current-price {
    color: #e4393c;
    font-size: 28px;
    font-weight: bold;
}

h3 {
    font-size: 16px;
    color: #666;
    margin-bottom: 12px;
}

.add-cart-btn {
    width: 100%;
    height: 50px;
    font-size: 16px;
    border-radius: 25px;
}

.goods-description {
    margin-top: 40px;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    h2 {
        font-size: 20px;
        color: #333;
        margin-bottom: 20px;
    }

    p {
        line-height: 1.8;
        color: #666;
    }
}

.bottom-section {
    flex: 1; // 新增：占用剩余空间
    min-height: 200px; // 最小高度保障
}
</style>